﻿<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link href="stylesheets/praise.css" rel="stylesheet" />
    <style>
        #myLog{
            float: left;
			height: 100%;
            display: block;

        }
		.hah{
			border-bottom: solid 1px black;
			width:250px;
			margin-bottom: 16px;
		}
		.pinglun{
			border-bottom: solid 1px black;
			width:504px;
			margin-bottom: 16px;
		}
		.cont{
			height: 18px;
			overflow: hidden;
		}
        #display{
            margin: auto;
            display: none;
        }
        .inputArea{
            border: 1px solid gray;
            height:30px;
            width:500px;
        }
        .textarea{
            height:280px;
			overflow:scroll;
        }
        .sendComment{
            background-color: rgba(32, 179, 32, 0.51);
            border: 1px solid gray;
            height:30px;
            width:90px;
            border-radius:6%;
        }
        .opa{
           opacity:0;
           display: block;
        }
        .showComment{
        }
    </style>
    <script type="text/javascript" src="javascripts/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="javascripts/xheditor.min.js"></script>
    <script type="text/javascript" src="javascripts/xheditor_lang/zh-cn.js"></script>
  </head>
  <body style="background-image:url(./img/9.jpg);display:flex;">
    <div id="myLog">
        <div style="right:0;position:absolute;"><a href="./home"><img style="width:40px;height:40px;" src="img/home.png" alt="返回主页" /></a></div>
		<h1>日志列表</h1>
		<%  for(var i=1; i<=Math.ceil(totalSource.length/8); i++) {%>
			<a value="<%= i %>" href=<%= originalUrl+"&page="+ i %> > <%= i %></a>
		  <%}%>
		<%logSource.forEach(function(item, i) { %>
        <div id="container">
            <div class="feed" id="feed<%= i+1 %>" >
            <div class="heart" style="background-position:<%=  praisedPersonArr[i].indexOf(sessionName) != -1?-2200:0 %>px" id="like<%= i+1 %>" rel="<%=  praisedPersonArr[i].indexOf(sessionName) != -1?'unlike':'like' %>" ></div> <div class="likeCount" id="likeCount<%= i+1 %>"><%= item.praise %></div>
            </div>
        </div>
		<div class="hah" onclick="displayLog(event);">
			<div class="cont">标题：<%= item.title %></div>
			<div class="cont">作者：<%= item.author %></div>
			<div class="cont">发布时间：<%= item.time.toLocaleString() %></div>
			<div class="cont">内容：<%= item.content %></div>
            <div class="cont">logId：<%= item._id %></div>
		</div>

		<% }); %>
	</div>
    <div style="color:red;"><%= info %></div>
    <div id="display">
        <input class="inputArea" type="text" placeholder="标题"  name="title" disabled/><br/><br/>
		<div id="txt" class="inputArea textarea " placeholder="正文" name="content" disabled></div>
        <div id="comment" class="showComment" placeholder="正文" name="content" ></div><br/><br/>
        <form action="./sendComment" method="post" >
        <input class="inputArea opa" id="logId" name="logId" ></input>
        <input class="inputArea opa" id="href" name="href" ></input>
        <textarea class="inputArea textarea xheditor" id="comm" name="comment">在此发布评论</textarea>
        <br/><br/>
        <input class="sendComment" type="submit" value="添加评论"></input>
        </form>
    </div>
    <script>
        //把数据显示到html中
        function showData(item, index, arr) {
            var nameNode = document.createElement("div");
            nameNode.className = "pinglun";
            var nameTxt = document.createTextNode("昵称："+item.userId.name);
            nameNode.appendChild(nameTxt);
            var container = document.getElementById("comment");
            container.appendChild(nameNode);            
            var ageNode = document.createElement("div");
            var ageTxt = document.createTextNode("年纪："+item.userId.age);
            ageNode.appendChild(ageTxt);
            var contentNode = document.createElement("div");
            //为了显示出符文本编辑内容
            contentNode.innerHTML = item.content;
            nameNode.appendChild(ageNode);
            nameNode.appendChild(contentNode);
        }
        function displayLog(event) {
            event.preventDefault();
            event.stopPropagation();
            var logId = event.target.parentNode.childNodes[9].innerText.slice(6);
			//发送ajax请求
			var xhr;
			if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
				xhr=new XMLHttpRequest();
			}else {// code for IE6, IE5
				xhr=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xhr.onreadystatechange=function() {
				if (xhr.readyState==4 && xhr.status==200) {
                    var docs = JSON.parse(xhr.responseText);
                    if(document.getElementById("comment").children.length === 0 && docs) {
                        //给评论模块赋值
                        document.getElementById("comment").innerHTML = "";
                        docs.forEach(showData);                    
                    }
                    if(!docs || docs.length === 0) {
                        document.getElementById("comment").innerHTML = "暂无评论";
                    }
                    
				}
			}
			xhr.open("get","./showComment?logId="+logId,true);
			xhr.send();
				
            var displayNode = document.getElementById("display");
            //给logId赋值
            var logIdNode = document.getElementById("logId");
            var hrefNode = document.getElementById("href");
            logIdNode.value =  logId;
            hrefNode.value =  window.location.href;
            displayNode.style.display = "block";
            displayNode.childNodes[1].value = event.target.parentNode.childNodes[1].innerText;
            displayNode.childNodes[5].innerHTML = event.target.parentNode.childNodes[7].innerText;
        }

        
       //item.praisedPerson.some(function(item.praisedPerson){ return item.praisedPerson.person==sessionName})?-2200px:0px  
$(document).ready(function()
{

$('body').on("click",'.heart',function()
{
	
	var A=$(this).attr("id");
	var B=A.split("like");
	var messageID=B[1];
	var C=parseInt($("#likeCount"+messageID).html());
	$(this).css("background-position","")
	var D=$(this).attr("rel");
    var logId = $(this).parent().parent().next().children().last().text().slice(6);
	if(D === 'like') 
	{      
        $("#likeCount"+messageID).html(C+1);
        $(this).addClass("heartAnimation").attr("rel","unlike");
        

        $.get("./updownPraise?increase=true&logId="+logId,function(data,status){
          //alert("数据：" + data + "\n状态：" + status);
          console.log("数据：" + data + "\n状态：" + status);
        });
    
    

	
	}
	else
	{
        $("#likeCount"+messageID).html(C-1);
        $(this).removeClass("heartAnimation").attr("rel","like");
        $(this).css("background-position","left");
        $.get("./updownPraise?increase=false&logId="+logId,function(data,status){
          //alert("数据：" + data + "\n状态：" + status);
          console.log("数据：" + data + "\n状态：" + status);
        });
	}


});


});
    </script>
  </body>
</html>
